//突起九宫格
*{padding:0;margin:0;box-sizing: border-box;}
*:after{
    content:"";
    display:block;
    clear:both;
}
@red:inline;
html{
    font-size:16px;
    font-family: "微软雅黑" "arial" "arial black";
}
div{
    display:@red;
}
.outnav{
    ul{
        border:1px solid red;
        list-style: none;
        height:72px;
        line-height:72px;
        li{
            padding:0px 15px;
            float:left;
        }
    }
}
//滑动条
.left,.top,.bottom,.right{
    position:relative;
    overflow: hidden;
}
.left:before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    height:100%;
    width:100%;
    background:red;
    z-index:-1;
    transition:left 0.3s ease ;
}
.left:hover:before{
    left:0px;
    margin-left:-15px;
    transform: translate(15px,0);
    transition:left 0.3s ease , margin-left 0.3s 0.3s ease , transform 0.3s 0.6s ease;
}
.right:before{
    content:"";
    position:absolute;
    top:0;
    left:100%;
    height:100%;
    width:100%;
    background:red;
    z-index:-1;
    transition:left 0.3s ease ;
}
.right:hover:before{
    left:0px;
    margin-left:15px;
    transform: translate(-15px,0);
    transition:left 0.3s ease , margin-left 0.3s 0.3s ease , transform 0.3s 0.6s ease;
}
.top:before{
    content:"";
    position:absolute;
    top:-100%;
    left:0;
    height:100%;
    width:100%;
    background:red;
    z-index:-1;
    transition:top 0.3s ease ;
}
.top:hover:before{
    top:0;
    margin-top:-15px;
    transform: translate(0,15px);
    transition:top 0.3s ease , margin-top 0.3s 0.3s ease , transform 0.3s 0.6s ease;
}
.bottom:before{
    content:"";
    position:absolute;
    top:100%;
    left:0;
    height:100%;
    width:100%;
    background:red;
    z-index:-1;
    transition:top 0.3s ease ;
}
.bottom:hover:before{
    top:0;
    margin-top:15px;
    transform: translate(0,-15px);
    transition:top 0.3s ease , margin-top 0.3s 0.3s ease , transform 0.3s 0.6s ease;
}
//滑动条end